<template>
  <div class="widthFull">
    <div class="user-info">
      <div class="user-icon"><img src="../assets/user/headimg.jpg" /></div>
      <div class="user-name">
        <div class="dt">飞翔的小土豆</div>
        <div class="dt">等级：普通会员</div>
        <div class="dt">待返还金额：500.0</div>
      </div>
    </div>
    <div class="order-box-content">
      <div class="infoList" @click="to('orderManage')">
        <div class="user-order-box">
          <img src="../assets/user/user-order-all.png" /> <span>全部订单</span>
          <img src="../assets/icon/icon-more.png" />
        </div>
        <div class="user-order-box-type">
          <div>
            <div><img src="../assets/user/waitForPay.png" /></div>
            <div>待付款</div>
          </div>
          <div>
            <div><img src="../assets/user/waitForDeliver.png" /></div>
            <div>待发货</div>
          </div>
          <div>
            <div><img src="../assets/user/waitForSign.png" /></div>
            <div>待收货</div>
          </div>
          <div>
            <div><img src="../assets/user/waitForEvaluate.png" /></div>
            <div>待评价</div>
          </div>
        </div>
      </div>
      <div class="infoList" @click="to('vault')">
        <div class="user-order-box">
          <img src="../assets/user/vault.png" /> <span>我的小金库</span>
          <img src="../assets/icon/icon-more.png" />
        </div>
        <div class="user-order-box-type">
          <div>
            <div class="treasury-value">800.0</div>
            <div>账户总额</div>
          </div>
          <div>
            <div class="treasury-value">50.0</div>
            <div>返现金额</div>
          </div>
          <div>
            <div class="treasury-value">550.0</div>
            <div>待返现</div>
          </div>
          <div>
            <div class="treasury-value">165</div>
            <div>蓝豆</div>
          </div>
        </div>
      </div>
      <div class="user-order-box">
        <img src="../assets/user/deal.png" /> <span>交易记录</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
      <div class="user-order-box" @click="to('favorites')">
        <img src="../assets/user/collect.png" /> <span>我的收藏</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
      <div class="user-order-box" @click="to('addressList')">
        <img src="../assets/user/address.png" /> <span>地址管理</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
      <div class="user-order-box" @click="to('bankCard')">
        <img src="../assets/user/bank.png" /> <span>我的银行卡</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
      <div class="user-order-box" @click="to('PSW')">
        <img src="../assets/user/psw.png" /> <span>密码修改</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
      <div class="user-order-box" @click="to('login')">
        <img src="../assets/user/quit.png" /> <span>退出帐号</span>
        <img src="../assets/icon/icon-more.png" />
      </div>
    </div>
  </div>
</template>
<style>
  @import "../css/style.css";
  /* 公共样式 */
  .user-type-img {
    width: 1.25rem;
    height: 1.25rem;
  }
  .justify-flex-start {
    display: flex;
    justify-content: flex-start;
  }
  /* 个别样式 */
  .user-info {
    padding: 0.9375rem;
    top: 0;
    height: 5.6rem;
    display: flex;
    align-items: center;
    position: relative;
    color: #ffeced;
    background-color: #fd8e01;
  }
  .user-icon {
    width: 30%;
  }
  .user-info img {
    height: 4.5rem;
    width: 4.5rem;
    border-radius: 50%;
  }
  .user-name {
    display: flex;
    flex-flow: column;
  }
  .user-name .dt {
    padding: 0.12rem;
    padding-left: 0.6rem;
    text-align: left;
  }
  .row-center {
    justify-content: center;
  }
  .infoList {
    position: relative;
    margin: 0.8rem 0;
    background: #fff;
  }
  .user-order-box {
    height: 1.4rem;
    display: flex;
    align-items: center;
    padding: 0.6rem 0.625rem;
    background-color: #fff;
    border: 0.0625rem solid #f5f5f5;
  }
  .user-order-box:hover {
    background-color: #f5f5f5;
  }
  .user-order-box img {
    width: 1.25rem;
    height: 1.25rem;
  }
  .user-order-box span {
    margin: 0 0.3125rem;
    font-size: 0.96rem;
    color: #333;
    line-height: 1.25rem;
    flex: 1;
    text-align: left;
    margin-left: 0.8rem;
  }
  .user-order-box-type {
    display: flex;
    justify-content: space-around;
    font-size: 0.75rem;
    padding: 0.3rem 0;
  }
  .user-order-box-type img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .treasury-value {
    margin-top: 0.6rem;
  }
  .order-box-content {
    position: fixed;
    left: 0;
    right: 0;
    top: 8.2rem;
    bottom: 3rem;
    overflow-y: scroll;
  }
</style>
<script>
  export default {
    methods: {
      to(page) {
        this.$router.push({
          name: page
        });
      }
    }
  };
</script>
